<template>
  <div class="manage">
    <ul class="checknum">
      <li style="margin-left:20px;">
        用户总数 :
        <span style="color:#85ce61;">{{ total }}</span>
      </li>
      <li style="float:right;">
        <el-button @click="bathSignUp()" style="padding:13px 20px;" type="success">批量报名</el-button>
        <el-button @click="addUserDialog()" style="padding:13px 20px;" type="success">添加新用户</el-button>
        <el-button @click="addMoreUserDialog()" style="padding:13px 20px;" type="success">批量导入</el-button>
        <el-button @click="createAccountDialog()" style="padding:13px 20px;" type="info">批量创建账号</el-button>
      </li>
    </ul>
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" justify="start" type="flex">
          <el-col :span="24">
            <el-select style="width:120px;" v-model="listQuery.dateType">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="manageUserHandleFilter"
                v-for="item in dateTypes"
              />
            </el-select>
            <el-date-picker
              :picker-options="picker"
              @change="manageUserHandleFilter"
              align="right"
              end-placeholder="结束日期"
              range-separator="|"
              start-placeholder="开始日期"
              style="width:300px"
              type="daterange"
              unlink-panels
              v-model="listQuery.daterange"
              value-format="yyyy-MM-dd"
            />
            <el-select style="width:120px;" v-model="listQuery.searchType">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="manageUserHandleFilter"
                v-for="item in searchTypes"
              />
            </el-select>
            <el-input
              @keyup.enter.native="manageUserHandleFilter"
              placeholder="关键词"
              style="width:240px;"
              v-model="listQuery.searchValue"
            />
            <el-button @click="manageUserHandleFilter" size="medium" type="primary">搜索</el-button>
            <el-button @click="clearParams" size="medium" type="info">清空</el-button>
            <el-button @click="exportAccount()" type="primary">导出</el-button>
          </el-col>
        </el-row>
      </section>
    </div>

    <el-table
      :data="manageUserList"
      @selection-change="changeFun"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:15px;"
    >
      <el-table-column @selection-change="changeFun" type="selection" min-width="5%"/>
      <el-table-column align="center" label="用户名" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.verifiedMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="会员等级" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.isVip === '1' ? scope.row.levelName : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="注册时间" min-width="15%">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号" min-width="15%">
        <template slot-scope="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="前台账号状态" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.locked === '0' ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后登录" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.loginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="20%">
        <template slot-scope="scope" style="text-align: center">
          <el-button @click="signUp(scope.row)" type="primary">报名</el-button>
          <el-dropdown
            @click="handleClick(scope.row)"
            @command="handleCommand($event,scope)"
            split-button
            type="primary"
          >
            查看
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">编辑用户信息</el-dropdown-item>
              <el-dropdown-item command="2">设置用户组</el-dropdown-item>
              <el-dropdown-item command="3">修改用户头像</el-dropdown-item>
              <el-dropdown-item command="4">修改密码</el-dropdown-item>
              <!--<el-dropdown-item command="5">发送密码重置邮件</el-dropdown-item>-->
              <!--<el-dropdown-item command="6">发送Email验证邮件</el-dropdown-item>-->
              <!--<el-dropdown-item command="7">封禁邮件</el-dropdown-item>-->
              <el-dropdown-item command="8">删除用户</el-dropdown-item>
              <el-dropdown-item command="9">账号{{ scope.row.locked === '0' ? '禁用' : '启用' }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :limit.sync="listQuery.limit"
      :page.sync="listQuery.page"
      :total="total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      v-show="total>0"
    />

    <!-- 添加新用户 -->
    <el-dialog :visible.sync="dialog.addUser" :title="formTitle" width="700px">
      <el-form :model="eduUser" :rules="rules" ref="addUserForm">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="姓名" prop="name">
              <el-input style="width:200px;" v-model="eduUser.name"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="性别" prop="gender">
              <el-radio-group v-model="eduUser.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="身份证号" prop="idCard">
              <el-input style="width:200px;" v-model="eduUser.idCard"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户名" prop="nickName">
              <el-input style="width:200px;" v-model="eduUser.nickName"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="邮箱" prop="email">
              <el-input style="width:200px;" v-model="eduUser.email"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="账号" prop="account">
              <el-input style="width:200px;" v-model="eduUser.account"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="手机号" prop="verifiedMobile">
              <el-input style="width:200px;" v-model="eduUser.verifiedMobile"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="密码" prop="password">
              <el-input style="width:200px;" type="password" v-model="eduUser.password"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="确认密码" prop="confirmPassword">
              <el-input style="width:200px;" type="password" v-model="eduUser.confirmPassword"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户类型" prop="userType">
              <el-select style="width:200px;" v-model="eduUser.userType">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in userType"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户权限">
              <el-checkbox-group v-model="roleIds">
                <el-checkbox :key="role.id" :label="role.id" v-for="role in allRoleList">{{ role.name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item :label-width="formLabelWidth" label="学历">
              <el-select style="width:200px;" v-model="eduUser.education">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in educationList"
                />
              </el-select>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="公司">
              <el-input style="width:200px;" v-model="eduUser.company"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="职业">
              <el-input style="width:200px;" v-model="eduUser.profession"/>
            </el-form-item>
            <!--<el-form-item :label-width="formLabelWidth" label="头衔">-->
            <!--<el-input style="width:200px;" v-model="eduUser.title"/>-->
            <!--</el-form-item>-->

            <el-form-item :label-width="formLabelWidth" label="个人主页">
              <el-input style="width:200px;" v-model="eduUser.website"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="微博">
              <el-input style="width:200px;" v-model="eduUser.weibo"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="QQ">
              <el-input style="width:200px;" v-model="eduUser.qq"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="微信">
              <el-input style="width:200px;" v-model="eduUser.weixin"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="生日">
              <el-date-picker
                placeholder="选择日期"
                style="width:200px;"
                type="date"
                v-model="eduUser.birthday"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="个人签名">
              <el-input :rows="3" style="width:200px;" type="textarea" v-model="eduUser.signature"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="自我介绍">
              <el-input :rows="3" style="width:200px;" type="textarea" v-model="eduUser.description"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancelDialog()">取 消</el-button>
        <el-button @click="addUser()" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量添加新用户 -->
    <el-dialog :visible.sync="dialog.addMoreUser" title="批量添加" width="580px">
      <upload-excel-component :before-upload="beforeUpload" :on-success="handleSuccess"/>
      <div class="dialog-footer" slot="footer" style="text-align: center">
        <span v-if="dialogData.addMoreUser.loading">正在处理，请稍等......</span>
      </div>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog :visible.sync="dialog.editUser" title="编辑用户信息" width="700px">
      <el-form :model="eduUser" :rules="editRules" ref="updateUserForm">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="姓名" prop="name">
              <el-input style="width:200px;" v-model="eduUser.name"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="性别" prop="gender">
              <el-radio-group v-model="eduUser.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="身份证号" prop="idCard">
              <el-input style="width:200px;" v-model="eduUser.idCard"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户名" prop="nickName">
              <el-input style="width:200px;" v-model="eduUser.nickName" :disabled="true"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="邮箱" prop="email">
              <el-input style="width:200px;" v-model="eduUser.email"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="账号" prop="account">
              <el-input style="width:200px;" v-model="eduUser.account" :disabled="true"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="手机号" prop="verifiedMobile">
              <el-input style="width:200px;" v-model="eduUser.verifiedMobile" :disabled="true"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="密码" prop="password">
              <el-input style="width:200px;" type="password" v-model="eduUser.password"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="确认密码" prop="confirmPassword">
              <el-input style="width:200px;" type="password" v-model="eduUser.confirmPassword"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户类型" prop="userType">
              <el-select style="width:200px;" v-model="eduUser.userType">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in userType"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="用户权限">
              <el-checkbox-group v-model="roleIds">
                <el-checkbox :key="role.id" :label="role.id" v-for="role in allRoleList">{{ role.name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item :label-width="formLabelWidth" label="学历">
              <el-select style="width:200px;" v-model="eduUser.education">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in educationList"
                />
              </el-select>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="公司">
              <el-input style="width:200px;" v-model="eduUser.company"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="职业">
              <el-input style="width:200px;" v-model="eduUser.profession"/>
            </el-form-item>
            <!--<el-form-item :label-width="formLabelWidth" label="头衔">-->
            <!--<el-input style="width:200px;" v-model="eduUser.title"/>-->
            <!--</el-form-item>-->

            <el-form-item :label-width="formLabelWidth" label="个人主页">
              <el-input style="width:200px;" v-model="eduUser.website"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="微博">
              <el-input style="width:200px;" v-model="eduUser.weibo"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="QQ">
              <el-input style="width:200px;" v-model="eduUser.qq"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="微信">
              <el-input style="width:200px;" v-model="eduUser.weixin"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="生日">
              <el-date-picker
                placeholder="选择日期"
                style="width:200px;"
                type="date"
                v-model="eduUser.birthday"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="个人签名">
              <el-input :rows="3" style="width:200px;" type="textarea" v-model="eduUser.signature"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="自我介绍">
              <el-input :rows="3" style="width:200px;" type="textarea" v-model="eduUser.description"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancelEditDialog()">取 消</el-button>
        <el-button @click="updateUser()" type="primary">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 设置用户组 -->
    <el-dialog :visible.sync="dialog.setUser" title="设置用户组" width="580px">
      <el-form :model="dialogData.setUser">
        <el-checkbox-group v-model="dialogData.setUser.roleIds">
          <el-checkbox :key="role.id" :label="role.id" v-for="role in allRoleList">{{ role.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancelSetDialog()">取 消</el-button>
        <el-button @click="updateUserRoles" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户头像 -->
    <el-dialog :visible.sync="dialog.userImg" title="设置用户头像" width="580px">
      <el-form :model="dialogData.userImg">
        <el-form-item :label-width="formLabelWidth" label="当前头像">
          <el-upload
            :before-upload="beforeAvatarUpload"
            :http-request="uploadFile"
            :on-change="handleChange"
            :show-file-list="false"
            action=""
            class="avatar-uploader"
          >
            <img
              :src="dialogData.userImg.largeAvatar"
              class="avatar"
              v-if="dialogData.userImg.largeAvatar"
            />
            <i class="el-icon-plus avatar-uploader-icon"/>
            <div class="el-upload__tip" slot="tip">只能上传jpg文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.userImg = false">取 消</el-button>
        <el-button @click="updateUserAvatar" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog :visible.sync="dialog.changePassword" title="修改用户密码" width="580px">
      <el-form :model="dialogData.changePassword">
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input
            :disabled="true"
            style="width:300px;"
            v-model="dialogData.changePassword.nickName"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户邮箱">
          <el-input
            :disabled="true"
            style="width:300px;"
            v-model="dialogData.changePassword.email"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="新密码">
          <el-input
            @blur="checkPassword"
            style="width:300px;"
            v-model="dialogData.changePassword.newPassword"
          />
          <br/>
          <span style="color: red" v-if="checkMessageNew">&nbsp;&nbsp;{{ checkMessageNew }}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="确认密码">
          <el-input
            @blur="checkPassword"
            style="width:300px;"
            v-model="dialogData.changePassword.confirmPassword"
          />
          <br/>
          <span style="color: red" v-if="checkMessageConfirm">&nbsp;&nbsp;{{ checkMessageConfirm }}</span>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.changePassword = false">取 消</el-button>
        <el-button @click="updatePassword" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看个人详细信息 -->
    <el-dialog :visible.sync="dialog.view" title="个人详细信息" width="580px">
      <el-form :model="dialogData.view">
        <el-form-item :label-width="formLabelWidth" label="姓名">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.name"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="账号">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.account"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.nickName"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="Email">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.email"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户组">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.roles"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="注册时间/IP">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.createTime"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="最近登录时间/IP">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.loginTime"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="姓名">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.name"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="性别">
          <el-radio-group :disabled="true" style="width:300px;" v-model="dialogData.view.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证号">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.idCard"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="手机号码">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.verifiedMobile"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="公司">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.company"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="职业">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.profession"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="个人签名">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.signature"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="自我介绍">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.description"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="个人网站">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.website"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="微博">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.weibo"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="微信">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.weixin"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="QQ">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.qq"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="评论">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.comment"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="生日">
          <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.birthday"/>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.view = false" type="primary">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 报名弹框 -->
    <el-dialog :visible.sync="dialog.apply" class="applyBox" title="报名" width="1000px">
      <el-steps :active="applyStep" finish-status="success" simple>
        <el-step title="学员信息"/>
        <el-step title="选择收费"/>
      </el-steps>
      <el-form
        :model="EduxcloudUser"
        :rules="informationRules"
        label-width="120px"
        ref="eduxcloudUserForm"
      >
        <div v-if="applyStep===0">
          <div class="title-hint">基本信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名" prop="nickName">
                <el-input style="width:200px;" v-model="EduxcloudUser.nickName"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input style="width:200px;" v-model="EduxcloudUser.name"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio-group v-model="EduxcloudUser.gender">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型">
                <el-select placeholder="请选择" v-model="EduxcloudUser.documentType">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in documentTypeOptions"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件号码">
                <el-input style="width:200px;" v-model="EduxcloudUser.documentNumber"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期">
                <el-date-picker
                  placeholder="选择日期"
                  style="width:200px;"
                  type="date"
                  v-model="EduxcloudUser.birthday"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="户籍">
                <el-input style="width:200px;" v-model="EduxcloudUser.householdRegister"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历">
                <el-select placeholder="请选择" v-model="EduxcloudUser.education">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in educationList"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title-hint">联系信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号" prop="phoneNum">
                <el-input style="width:200px;" v-model="EduxcloudUser.verifiedMobile"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱">
                <el-input style="width:200px;" v-model="EduxcloudUser.email"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="紧急联系人">
                <el-input style="width:200px;" v-model="EduxcloudUser.contacts"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系人电话">
                <el-input style="width:200px;" v-model="EduxcloudUser.contactsPhone"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="QQ号">
                <el-input style="width:200px;" v-model="EduxcloudUser.qq"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信">
                <el-input style="width:200px;" v-model="EduxcloudUser.weixin"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在地">
                <el-cascader
                  :options="provincesOptions"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleChange"
                  v-model="EduxcloudUser.provinces"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址">
                <el-input style="width:200px;" v-model="EduxcloudUser.address"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-form :model="joinClassVo" :rules="chargeRules" label-width="120px" ref="joinClassVoForm">
        <div v-if="applyStep===1">
          <div class="title-hint">商品信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品类型">
                <el-radio-group v-model="joinClassVo.type">
                  <el-radio label="course">课程</el-radio>
                  <el-radio label="package">课程包</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="课程分类" v-if="joinClassVo.type==='course'">
                <el-cascader
                  :options="courseCategorys"
                  :props="{ multiple: true, checkStrictly: true }"
                  @change="getCourseList()"
                  clearable
                  v-model="categoryIds"></el-cascader>
              </el-form-item>

              <el-form-item label="课程包分类" v-if="joinClassVo.type==='package'">
                <el-cascader
                  :options="coursePackageCategorys"
                  :props="{ multiple: true, checkStrictly: false }"
                  @change="getCoursePackageList()"
                  clearable
                  v-model="coursePackageCategoryIds"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="课程包" v-if="joinClassVo.type==='package'">
                <el-select @change="getPirce()" multiple placeholder="请选择" v-model="joinClassVo.coursePackageIds">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in coursePackageList"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="学习课程" prop="courseIds" v-if="joinClassVo.type==='course'">
                <el-select @change="getPirce()" multiple placeholder="请选择" v-model="joinClassVo.courseIds">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in courseList"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="joinClassVo.type==='package'">
            <el-col :span="10">
              <el-form-item label="总课时" v-if="joinClassVo.type==='package'">
                <span>{{ joinClassVo.totalHours }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title-hint">应缴费用</div>
          <el-row style="margin-top:20px;">
            <el-col :span="10">
              <el-form-item label="总价">
                <span>{{ joinClassVo.price }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title-hint">支付</div>
          <div>
            <el-form-item label="支付方式：">
              <el-select multiple placeholder="请选择" v-model="joinClassVo.payType">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in payType"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span class="dialog-footer" slot="footer">
        <el-button @click="dialog.apply = false">取 消</el-button>
        <el-button @click="applyNextStep(EduxcloudUser.id)" type="info" v-if="applyStep=== 0">下一步</el-button>
        <el-button @click="applyStep = 0" type="info" v-if="applyStep=== 1">上一步</el-button>
        <el-button @click="applyconfirm" type="primary" v-if="applyStep=== 1">报 名</el-button>
      </span>
    </el-dialog>
    <!-- 批量报名弹框 -->
    <el-dialog :visible.sync="dialog.batchApply" class="applyBox" title="报名" width="1000px">
      <el-form :model="joinClassVo" :rules="chargeRules" label-width="120px" ref="joinClassVoForm">
        <div class="title-hint">商品信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类型">
              <el-radio-group v-model="joinClassVo.type">
                <el-radio label="course">课程</el-radio>
                <el-radio label="package">课程包</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="课程分类" v-if="joinClassVo.type==='course'">
              <el-cascader
                :options="courseCategorys"
                :props="{ multiple: true, checkStrictly: true }"
                @change="getCourseList()"
                clearable
                v-model="categoryIds"></el-cascader>
            </el-form-item>
            <el-form-item label="课程包分类" v-if="joinClassVo.type==='package'">
              <el-cascader
                :options="coursePackageCategorys"
                :props="{ multiple: true, checkStrictly: false }"
                @change="getCoursePackageList()"
                clearable
                v-model="coursePackageCategoryIds"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="课程包" v-if="joinClassVo.type==='package'">
              <el-select multiple placeholder="请选择" v-model="joinClassVo.coursePackageIds">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in coursePackageList"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="学习课程" prop="courseIds" v-if="joinClassVo.type==='course'">
              <el-select @change="getPirce()" multiple placeholder="请选择" v-model="joinClassVo.courseIds">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in courseList"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="joinClassVo.type==='package'">
          <el-col :span="14">
          </el-col>
        </el-row>
        <div class="title-hint">应缴费用</div>
        <el-row style="margin-top:20px;">
          <el-col :span="10">
            <el-form-item label="总价">
              <span>{{ joinClassVo.price }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title-hint">支付方式</div>
        <div>
          <el-form-item label="支付方式：">
            <el-select multiple placeholder="请选择" v-model="joinClassVo.payType">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in payType"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span class="dialog-footer" slot="footer">
        <el-button @click="dialog.batchApply = false">取 消</el-button>
        <el-button @click="applyconfirm" type="primary">报 名</el-button>
      </span>
    </el-dialog>
    <!-- 批量创建账号 -->
    <el-dialog :visible.sync="dialog.createAccount" title="批量创建账号" width="580px">
      <el-form :model="EduxcloudAccountVo" ref="createAccountForm">
        <el-form-item :label-width="formLabelWidth" label="数量">
          <el-input style="width:300px;" v-model="EduxcloudAccountVo.num"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="开始时间">
          <el-date-picker
            placeholder="选择日期"
            style="width:300px;"
            type="date"
            v-model="EduxcloudAccountVo.startTime"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="结束时间">
          <el-date-picker
            placeholder="选择日期"
            style="width:300px;"
            type="date"
            v-model="EduxcloudAccountVo.endTime"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.createAccount = false">取 消</el-button>
        <el-button @click="bathCreateAccount()" type="primary">保 存</el-button>
      </div>
    </el-dialog>
    <!--导出用户-->
    <el-dialog :visible.sync="dialog.exportAccount" title="导出用户" width="580px">
      <el-form :model="EduxcloudAccountVo" ref="createAccountForm">
        <el-form-item :label-width="formLabelWidth" label="开始时间">
          <el-date-picker
            placeholder="选择日期"
            style="width:300px;"
            type="date"
            v-model="EduxcloudAccountVo.startTime"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="结束时间">
          <el-date-picker
            placeholder="选择日期"
            style="width:300px;"
            type="date"
            v-model="EduxcloudAccountVo.endTime"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.exportAccount = false">取 消</el-button>
        <el-button
          :loading="downloadLoading"
          @click="handleExport()"
          size="medium"
          style="background-color:#e9ab3e;color:#fff;"
        >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import Pagination from '@/components/Pagination' // 分页组件
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import {
    addMoreUser,
    bathCreateAccount,
    categoryList,
    checkAccount,
    checkPhoneNumber,
    checkUserExit,
    courseList,
    coursePackageList,
    deleteUserById,
    getAllUserList,
    getCoursePrice,
    getEduxcloudClassRoomPrice,
    getEduxcloudUserById,
    getEduxcloudUserDic,
    getEduxcloudUserPager,
    joinClass,
    saveOrUpdateEduxcloudUser,
    updatePassword,
    updateUserAvatar,
    updateUserRoles
  } from '@/api/user/user'
  import { getTenantId, getUserId, getUserName } from '@/utils/auth'
  import { upLoadFile } from '@/api/upLoadFile'
  import { parseTime } from '@/utils'

  export default {
    components: { Pagination, UploadExcelComponent, Treeselect },
    data() {
      const confirmPassword = (rule, value, callback) => {
        if (!this.eduUser.password) {
          callback(new Error('请先输入密码再进行确认'))
        } else if (!value) {
          callback(new Error('请输入确认密码'))
        } else {
          if (value !== this.eduUser.password) {
            callback(new Error('输入的密码不一致，请重新输入'))
          } else {
            callback()
          }
        }
      }
      return {
        CategoryCourse: {},
        EduUserVo: {},
        courseCategorys: [],
        coursePackageCategorys: [],
        courseList: [],
        coursePackageList: [],
        downloadLoading: false,
        checkMessageNew: '',
        checkMessageConfirm: '',
        checkUser: true,
        eduUser: {
          gender: '1',
          userType: 'STUDENT'
        },
        allRoleList: {},
        roleIds: [],
        manageUserList: [{ nickName: '1' }],
        allList: [],
        imageUrl: '',
        formLabelWidth: '100px',
        total: 0,
        listLoading: true,
        listQuery: { dateType: 'login', daterange: [], role: '', regisSource: '', searchType: 'nickName', searchValue: '', startDate: '', endDate: '', page: 1, limit: 20 },
        payType: [{ label: '现金', value: 'm' }, { label: '微信', value: 'w' }, { label: '支付宝', value: 'z' }],
        dateTypes: [{ label: '登录时间', value: 'login' }, { label: '注册时间', value: 'regis' }],
        roles: [{ label: '所有角色', value: '' }],
        regisSources: [{ label: '--注册来源--', value: '' }],
        searchTypes: [{ label: '用户名', value: 'nickName' }, { label: '姓名', value: 'name' }, { label: '手机号', value: 'phone' }, { label: '邮件地址', value: 'email' }, { label: '登录IP', value: 'loginIp' }],
        userType: [{ label: '学员', value: 'STUDENT' }, { label: '教师', value: 'TEACHER' }, { label: '管理员', value: 'MANAGER' }],
        educationList: [{ label: '专科', value: 'specialty' }, { label: '本科', value: 'undergraduate' }, { label: '硕士', value: 'master' }, { label: '博士', value: 'docker' }],
        roleList: [],
        picker: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // 添加用户弹框标题
        formTitle: '',
        // 弹窗弹出/消失
        dialog: {
          createAccount: false,
          exportAccount: false,
          addUser: false,
          editUser: false,
          setUser: false,
          userImg: false,
          changePassword: false,
          addMoreUser: false,
          view: false,
          apply: false,
          batchApply: false
        },
        // 创建
        dialogData: {
          addMoreUser: {
            loading: false
          },
          setUser: { roleIds: [] },
          userImg: { largeAvatar: '' },
          changePassword: {},
          file: '',
          view: {}
        },
        rules: {
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                checkAccount(value).then(res => {
                  if (res.data.result) {
                    callback(new Error('账号已存在，请重新输入！'))
                  } else {
                    callback()
                  }
                })
              },
              trigger: 'blur'
            }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          nickName: [
            { required: true, message: '请输入用户昵称', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                if (value) {
                  checkUserExit(value).then(res => {
                    if (res.data.item) {
                      callback(new Error('昵称已存在，请重新输入！'))
                    } else {
                      callback()
                    }
                  })
                }
              },
              trigger: 'blur'
            }
          ],
          verifiedMobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                checkPhoneNumber(value).then(res => {
                  if (res.data.result) {
                    callback(new Error('手机号已被使用，请换一个手机号'))
                  } else {
                    callback()
                  }
                })
              },
              trigger: 'blur'
            }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: confirmPassword, trigger: 'blur' },
            { required: true, message: '请输入确认密码', trigger: 'blur' }
          ],
          userType: [
            { required: true, message: '用户类型不能为空', trigger: 'blur' }
          ],
          idCard: [
            { min: 18, max: 18, message: '长度为18字符', trigger: 'blur' },
            {
              required: true,
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '请输入正确的身份证号',
              trigger: 'blur'
            }
          ]
        },
        editRules: {
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          nickName: [
            { required: true, message: '请输入用户昵称', trigger: 'blur' }
          ],
          verifiedMobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: confirmPassword, trigger: 'blur' },
            { required: true, message: '请输入确认密码', trigger: 'blur' }
          ],
          userType: [
            { required: true, message: '用户类型不能为空', trigger: 'blur' }
          ],
          idCard: [
            { min: 18, max: 18, message: '长度为18字符', trigger: 'blur' },
            {
              required: true,
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '请输入正确的身份证号',
              trigger: 'blur'
            }
          ]
        },
        applyStep: 0,
        EduxcloudUser: {
          nickName: '',
          name: '',
          gender: '1',
          documentType: '',
          documentNumber: '',
          birthday: '',
          householdRegister: '',
          education: '',
          // firsetGroup: '',
          // secondGroup: '',
          verifiedMobile: '',
          homePhone: '',
          officePhone: '',
          contacts: '',
          contactsPhone: '',
          email: '',
          qq: '',
          weixin: '',
          provinces: '',
          address: ''
        },
        EduxcloudAccountVo: {
          num: '',
          startTime: '',
          endTime: '',
          tenantId: ''
        },
        categoryIds: '',
        coursePackageCategoryIds: '',
        joinClassVo: {
          type: 'course',
          userIds: [],
          courseIds: [],
          coursePackageIds: [],
          payType: '',
          tenantId: '',
          totalHours: '',
          price: ''
        },
        documentTypeOptions: [{ value: '身份证', label: '身份证' }, { value: '护照', label: '护照' }, { value: '港澳通行证', label: '港澳通行证' }, { value: '台胞证', label: '台胞证' }, { value: '军官证', label: '军官证' }, { value: '士官证', label: '士官证' }, { value: '未确定证件', label: '未确定证件' }],
        multipleSelection: [],
        provincesOptions: [],
        coursePackageOptions: [],
        informationRules: {
          userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          verifiedMobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
        },
        chargeRules: {
          firstSubject: [{ required: true, message: '请选择学科', trigger: 'change' }],
          secondSubject: [{ required: true, message: '请选择学科小类', trigger: 'change' }],
          secondClassify: [{ required: true, message: '请选择分类', trigger: 'change' }],
          coursePackage: [{ required: true, message: '请选择课程包', trigger: 'change' }],
          courseIds: [{ required: true, message: '请选择学习课程', trigger: 'change' }]
        }
      }
    },
    created() {
      this.getManageUserList()
      // this.getAllUserList();
      this.initUserDic()
    },
    mounted() {
      this.getCourseCategorys()
      this.getCoursePackageCategorys()
    },
    methods: {
      // 改变分页页数
      handleSizeChange(val) {
        this.listQuery.page = 1
        this.listQuery.limit = val.value
        this.getManageUserList()
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.listQuery.page = val.value
        this.getManageUserList()
      },
      getCoursePackageCategorys() {
        categoryList('class', getTenantId()).then(response => {
          this.coursePackageCategorys = response.data.items
        }).catch(() => {
        })
      },
      clearParams() {
        this.listQuery.dateType = 'login'
        this.listQuery.daterange = []
        this.listQuery.role = ''
        this.listQuery.regisSource = ''
        this.listQuery.searchType = ''
        this.listQuery.searchValue = ''
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
        this.getManageUserList()
      },
      // 上传文件
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 1
        if (isLt1M) {
          return true
        }
        this.$message({
          message: '请不要上传大小超过1M的文件',
          type: 'warning'
        })
        return false
      },
      handleSuccess({ results, header }) {
        this.dialogData.addMoreUser.loading = true
        addMoreUser(results).then(() => {
          this.$notify({ title: '成功', message: '批量导入完成', type: 'success', duration: 2000 })
          this.dialogData.addMoreUser.loading = false
          this.getManageUserList()
        })
        this.dialog.addMoreUser = false
      },
      getManageUserList() {
        const params = {}
        params.dateType = this.listQuery.dateType
        if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
          params.startDate = this.listQuery.daterange[0]
          params.endDate = this.listQuery.daterange[1]
        }
        params.role = this.listQuery.role
        params.regisSource = this.listQuery.regisSource
        params.searchType = this.listQuery.searchType
        params.searchValue = this.listQuery.searchValue
        params.page = this.listQuery.page
        params.limit = this.listQuery.limit
        params.tenantId = getTenantId()
        console.log('startDate:' + params.startDate)
        console.log('endDate:' + params.endDate)
        getEduxcloudUserPager(params).then(response => {
          this.manageUserList = response.data.items
          this.total = response.data.total
        })
      },
      getAllUserList() {
        getAllUserList(getTenantId()).then(response => {
          this.allList = response.data.items
        })
      },
      initUserDic() {
        getEduxcloudUserDic(getTenantId()).then(response => {
          const regisSourceList = response.data.regisSourceList
          for (const item in regisSourceList) {
            this.regisSources.push({ 'value': regisSourceList[item].id, 'label': regisSourceList[item].name })
          }
          const roleList = response.data.roleList
          for (const item in roleList) {
            this.roles.push({ 'value': roleList[item].id, 'label': roleList[item].name })
          }
          this.allRoleList = response.data.roleList
        })
      },
      // 数据检索
      manageUserHandleFilter() {
        this.getManageUserList()
      },
      //单个报名
      signUp(row) {
        this.EduxcloudUser = row
        this.dialog.apply = true
      },
      //批量报名
      bathSignUp() {
        if (this.multipleSelection.length > 0) {
          this.dialog.batchApply = true
        } else {
          this.$message.error('请选择用户!')
        }
      },
      addUserDialog() {
        this.dialog.addUser = true
        this.formTitle = '添加新用户'
      },
      addMoreUserDialog() {
        this.dialog.addMoreUser = true
      },
      createAccountDialog() {
        this.dialog.createAccount = true
      },
      // 判定头像图片是否符合要求
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      // 上传用户头像获取
      handleChange(file) {
        this.file = file.raw
      },
      // 上传头像
      uploadFile() {
        const form = new FormData()
        form.append('name', this.file.name)
        form.append('uid', this.file.uid)
        form.append('file', this.file)
        upLoadFile(form).then(res => {
          this.dialogData.userImg.largeAvatar = res.data.url
        })
      },
      updateUserAvatar() {
        this.dialog.userImg = false
        updateUserAvatar(this.dialogData.userImg.id, this.dialogData.userImg.largeAvatar).then(res => {
          this.$notify({
            title: '成功',
            message: '用户头像上传成功',
            type: 'success',
            duration: 2000
          })
          this.getManageUserList()
        })
      },
      exportAccount() {
        this.dialog.exportAccount = true
      },
      // 导出按钮
      handleExport() {
        this.dialog.exportAccount = false
        this.EduxcloudAccountVo.tenantId = getTenantId()
        getAllUserList(this.EduxcloudAccountVo).then(response => {
          if (response.data.items) {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
              const tHeader = ['用户名', '账号', '密码']
              const filterVal = ['nickName', 'account', 'initPassword']
              const list = response.data.items
              const data = this.formatJson(filterVal, list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: 'userList',
                autoWidth: true,
                bookType: 'xlsx'
              })
              this.downloadLoading = false
            })
          } else {

          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'createTime' || j === 'loginTime') {
            return v[j] ? parseTime(v[j]) : v[j]
          } else {
            return v[j]
          }
        }))
      },
      // 表格操作按钮
      handleCommand(command, scope) {
        if (command === '1') {
          this.dialog.editUser = true
          getEduxcloudUserById(scope.row.id).then(response => {
            this.eduUser = response.data.eduxcloudUser
          })
          this.formTitle = '编辑用户'
          return
        }
        if (command === '2') {
          this.dialog.setUser = true
          console.log(scope.row)
          this.dialogData.setUser.id = scope.row.id
          this.dialogData.setUser.roleIds = scope.row.roleIds ? scope.row.roleIds.split(',') : []
          console.log(this.dialogData.setUser)
        }
        if (command === '3') {
          this.dialog.userImg = true
          this.dialogData.userImg.largeAvatar = scope.row.largeAvatar
          this.dialogData.userImg.id = scope.row.id
        }
        if (command === '4') {
          this.dialog.changePassword = true
          this.dialogData.changePassword.password = scope.row.password
          this.dialogData.changePassword.nickName = scope.row.nickName
          this.dialogData.changePassword.email = scope.row.email
          this.dialogData.changePassword.id = scope.row.id
        }
        if (command === '5') {
          this.$message({
            type: 'success',
            message: '密码重置邮件，发送成功'
          })
          return
        } else if (command === '6') {
          this.$message({
            type: 'success',
            message: 'Email验证邮件，发送成功'
          })
          return
        }
        if (command === '7') {
          this.$confirm(`永久封禁(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.tableData.splice(scope.$index, 1)
            this.$message({
              type: 'success',
              message: `${scope.row.nickName}已被封禁`
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消封禁'
            })
          })
          return
        }
        if (command === '8') {
          this.$confirm(`永久删除(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteUserById(scope.row.id).then(res => {
              this.getManageUserList()
              this.$notify({
                title: '成功',
                message: `${scope.row.nickName}已被删除`,
                type: 'success',
                duration: 2000
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
        }
        if (command === '9') {
          let title = ''
          if (scope.row.locked === '0') {
            title = '禁用'
          } else {
            title = '启用'
          }
          this.$confirm(`确定要${title}(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            scope.row.locked = scope.row.locked === '0' ? '1' : '0'
            saveOrUpdateEduxcloudUser(scope.row).then(res => {
              this.getManageUserList()
              this.$notify({
                title: '成功',
                message: `${scope.row.nickName}已被${title}`,
                type: 'success',
                duration: 2000
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消禁用'
            })
          })
        }
      },
      addUser() {
        this.$refs['addUserForm'].validate((valid) => {
          if (valid) {
            this.eduUser.creatorId = getUserId()
            this.eduUser.creatorName = getUserName()
            this.eduUser.tenantId = getTenantId()
            this.eduUser.roleIds = this.roleIds.toString()
            saveOrUpdateEduxcloudUser(this.eduUser).then(() => {
              this.eduUser = {}
              this.$notify({ title: '成功', message: '创建成功', type: 'success', duration: 2000 })
              this.getManageUserList()
              this.checkUser = true
            })
            this.dialog.addUser = false
          }
        })
      },
      cancelDialog() {
        this.dialog.addUser = false
        this.$refs.addUserForm.clearValidate()
        this.eduUser = {}
      },
      cancelEditDialog() {
        this.dialog.editUser = false
        this.$refs.updateUserForm.clearValidate()
        this.eduUser = {}
      },
      cancelSetDialog() {
        this.dialog.setUser = false
        this.dialogData.setUser = { roleIds: [] }
      },
      updateUser() {
        this.$refs['updateUserForm'].validate((valid) => {
          if (valid) {
            saveOrUpdateEduxcloudUser(this.eduUser).then(() => {
              this.eduUser = {}
              this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 })
              this.getManageUserList()
            })
            this.dialog.editUser = false
          }
        })
      },
      updateUserRoles() {
        this.dialog.setUser = false
        const id = this.dialogData.setUser.id.toString()
        const roleIds = this.dialogData.setUser.roleIds.toString()
        updateUserRoles(id, roleIds).then(() => {
          this.eduUser = {}
          this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 })
          this.getManageUserList()
        })
      },
      checkPassword() {
        const newPassword = this.dialogData.changePassword.newPassword
        const confirmPassword = this.dialogData.changePassword.confirmPassword
        const password = this.dialogData.changePassword.password
        if (newPassword && newPassword === password) {
          this.checkMessageNew = '不能与原来的密码一致！'
          return
        }
        this.checkMessageNew = ''
        if (confirmPassword && newPassword !== confirmPassword) {
          this.checkMessageConfirm = '两次密码不一致！'
          return
        }
        this.checkMessageConfirm = ''
      },
      updatePassword() {
        if (this.checkMessageNew || this.checkMessageConfirm) {
          return
        }
        if (!this.dialogData.changePassword.newPassword) {
          this.checkMessageNew = '新密码不能为空！'
          return
        }
        this.dialog.changePassword = false
        const id = this.dialogData.changePassword.id
        const password = this.dialogData.changePassword.newPassword
        updatePassword(id, password).then(() => {
          this.$notify({
            title: '成功',
            message: '用户密码修改成功',
            type: 'success',
            duration: 2000
          })
          this.getManageUserList()
        })
      },
      // 查看按钮
      handleClick(row) {
        this.$router.push({ name: 'Userinfo', params: { userId: row.id } })
      },
      applyNextStep(id) {
        this.$refs.eduxcloudUserForm.validate((valid) => {
          if (valid) {
            saveOrUpdateEduxcloudUser(this.EduxcloudUser).then(() => {
              this.joinClassVo.userIds.push(id)
              this.applyStep = 1
            })
          } else {
            return false
          }
        })
      },
      //复选框状态改变
      changeFun(val) {
        this.multipleSelection = val
      },
      bathCreateAccount() {
        this.$refs['createAccountForm'].validate((valid) => {
          if (valid) {
            this.EduxcloudAccountVo.tenantId = getTenantId()
            bathCreateAccount(this.EduxcloudAccountVo).then(() => {
              this.$notify({ title: '成功', message: '创建成功', type: 'success', duration: 2000 })
              this.getManageUserList()
            })
            this.dialog.createAccount = false
          }
        })
      },
      getPirce() {
        if (this.joinClassVo.courseIds.length > 0) {
          getCoursePrice(this.joinClassVo.courseIds.join(',')).then(res => {
            this.joinClassVo.price = res.data.items
          })
        }
        if (this.joinClassVo.coursePackageIds.length > 0) {
          getEduxcloudClassRoomPrice(this.joinClassVo.coursePackageIds.join(',')).then(res => {
            this.joinClassVo.price = res.data.items
          })
        }
      },
      applyconfirm() {
        this.$refs.joinClassVoForm.validate((valid) => {
          if (valid) {
            this.multipleSelection.map(item => {
              this.joinClassVo.userIds.push(item['id'])
            })
            this.joinClassVo.tenantId = getTenantId()
            this.joinClassVo.payType = this.joinClassVo.payType.join(',')
            joinClass(this.joinClassVo).then(() => {
              this.$notify({ title: '成功', message: '报名成功!', type: 'success', duration: 2000 })
              this.joinClassVo = { type: 'course', userIds: [], courseIds: [], coursePackageIds: [], payType: '', tenantId: '', totalHours: '', price: '' }
              this.EduxcloudUser = {
                nickName: '',
                name: '',
                gender: '1',
                documentType: '',
                documentNumber: '',
                birthday: '',
                householdRegister: '',
                education: '',
                verifiedMobile: '',
                homePhone: '',
                officePhone: '',
                contacts: '',
                contactsPhone: '',
                email: '',
                qq: '',
                weixin: '',
                provinces: '',
                address: ''
              }

              if (this.dialog.apply) {
                this.dialog.apply = false
              }
              if (this.dialog.batchApply) {
                this.dialog.batchApply = false
              }
              if (this.applyStep === 1) {
                this.applyStep = 0
              }
              this.categoryIds = ''
              this.coursePackageCategoryIds = ''
              this.getManageUserList()
            })
          } else {
            return false
          }
        })
      },
      getCourseCategorys() {
        categoryList('course', getTenantId()).then(response => {
          console.log(response.data.items)
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      getCourseList() {
        this.EduUserVo.tenantId = getTenantId()
        this.EduUserVo.categoryId = this.categoryIds.join(',')
        this.EduUserVo.name = this.listQuery.name
        courseList(this.EduUserVo).then(response => {
          console.log(response.data.items)
          this.courseList = response.data.items
        }).catch(() => {
        })
      },
      getCoursePackageList() {
        coursePackageList(this.coursePackageCategoryIds.join(','), getTenantId()).then(response => {
          console.log(response.data.items)
          this.coursePackageList = response.data.items
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss">
  .manage {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }

    .el-dialog {
      border-radius: 6px;
    }

    .checknum {
      list-style: none;
      padding: 0 0 0 11px;
      margin: 6px 0 20px;
      height: 70px;
      line-height: 70px;
      box-sizing: border-box;
      background-color: #f8f8f8;

      li {
        float: left;
        display: block;
        margin-right: 20px;
        color: #72726f;
      }
    }

    .applyBox {
      /deep/ .el-dialog__body {
        padding: 20px;
        overflow: auto;
        max-height: 610px;
      }

      .title-hint {
        border-bottom: 1px solid #eee;
        padding: 5px;
        margin: 10px 0;
      }
    }
  }
</style>
